<html>
  <head>
    <link type="text/css" rel="stylesheet" href="/css/main.css" />
  <script src="/js/util.js"></script>
  <script src="/js/validation.js"></script>
  <script>
    function onCheckClick() {
      document.getElementById('username_status').innerHTML = '<img src="/img/loading.gif">';
      var username = document.getElementById('username').value;
      downloadUrl('/availability?username=' + username, onCheckCallback);
    }
    function onCheckCallback(response) {
      switch (response) {
        case 'yes':
          message = 'Yes, that\'s available!';
          break;
        case 'no':
          message = 'Sorry, that username is not available.';
          break;
        case 'error':
          message = 'There was an error checking the availability.';
          break;
        case 'invalid':
          message = 'Application Identifiers may contain only numbers,' +
          'lowercase letters or hyphens and must be between 6 and 30 characters..';
          break;
        }
      document.getElementById('username_status').innerHTML = message;
    }

    function setupValidation() {
      var first_name = new LiveValidation('first_name');
      first_name.add( Validate.Presence );
      var last_name = new LiveValidation('last_name');
      last_name.add( Validate.Presence );
      var tos_api = new LiveValidation('tos_api');
      tos_api.add( Validate.Acceptance );
      var tos_account = new LiveValidation('tos_account');
      tos_account.add( Validate.Acceptance );
    }
  </script>
  </head>
  <body onload="setupValidation()">
<style>
.formlabel {
  display:block;
  font-weight:bold;
}

.formhelp {
  color:#616161;
  display:block;
  margin:0.1em 0 0.25em;
}

.formrow input {
  margin-top:0;
  vertical-align:middle;
}

input, select, textarea, option {
  font-family:inherit;
  font-size:inherit;
}
</style>
    <form action="/sign" method="post">
<hr class="ss-email-break" style="display:none;"> 
<div class="ss-required-asterisk">* Required</div></div> 
 
<br> 
<div class="errorbox-good"> 
<div class="ss-item ss-item-required ss-text"><div class="formrow"><label class="formlabel" for="first_name">First Name:
<span class="ss-required-asterisk">*</span></label> 
<input type="text" name="first_name" value="" class="ss-q-short" id="first_name"></div></div></div> 
<br> <div class="errorbox-good"> 
<div class="ss-item ss-item-required ss-text"><div class="formrow"><label class="formlabel" for="last_name">Last Name:
<span class="ss-required-asterisk">*</span></label> 
<input type="text" name="last_name" value="" class="ss-q-short" id="last_name"></div></div></div> 
<br> <div class="errorbox-good"> 
<div class="ss-item ss-item-required ss-text"><div class="formrow"><label
      class="formlabel" for="choice">Desired username:
<span class="ss-required-asterisk">*</span></label> 
<label class="formhelp" for="choice">Can be letters, numbers, underscore and dot - [A-Za-z0-9_.]</label> 
<input type="text" id="username" name="choice" value="{{username}}" class="ss-q-short" id="choice_1"></div></div></div> 
<input type="button" value="Check Availability" onclick="onCheckClick()"/>
<div id="username_status"></div>

<br> <div class="errorbox-good">
<div class="ss-item ss-item-required ss-checkbox"><div class="formrow"><label class="formlabel" for="tos_account">User Account Terms of Service
<span class="ss-required-asterisk">*</span></label> 
<label class="formhelp" for="tos_account">http://www.google.com/accounts/TOS</label> 
<label for="group_6_1">I agree to the above terms and conditions. </label>
<input type="checkbox" name="tos_account" id="tos_account" value="I agree to the above terms and conditions. " class="ss-q-checkbox"> 
</div></div></div>
<br> <div class="errorbox-good"> 
<div class="ss-item ss-item-required ss-checkbox"><div class="formrow"><label class="formlabel" for="tos_api">API Terms of Service
<span class="ss-required-asterisk">*</span></label> 
<label class="formhelp" for="tos_api">http://code.google.com/apis/wave/terms.html</label> 
<label for="group_7_1">I agree to the above terms and conditions. </label>
<input type="checkbox"
  name="tos_api" id="tos_api" value="I agree to the above terms and conditions. " class="ss-q-checkbox" id="group_7_1"> 
</div></div></div>

     <div><input type="submit" value="Request Sandbox Account"></div>
    </form>
    <p><a href="{{ url }}">Logout</a></p>
  </body>
</html>
